<!-- 个人中心界面 -->
<template>
  <div class="center">
    <!-- <navigationBar></navigationBar> -->

    <div class="bigbox">
      <el-container>
        <el-aside width="200px" style="background-color:rgb(250,250,250)">
          <el-container>
            <el-header
              height="40px"
              style="
                line-height: 40px;
                background: rgb(250, 250, 250);
                border-right: 1px solid #e1e2e5;
                border-bottom: 1px solid #e1e2e5;
              "
            >
              <!-- Header content -->
              个人中心
            </el-header>
            <el-menu
              :default-active="activeIndex"
              router
              background-color="rgb(250,250,250)"
            >
              <el-submenu index="2">
                <template slot="title"
                  ><img src="/img/cuxiao.png" alt="" />账号相关</template
                >
                <el-menu-item index="/center/personalInfo"
                  >个人信息</el-menu-item
                >
                <el-menu-item index="/center/collection"
                  >收藏列表</el-menu-item
                >
                <el-menu-item index="/center/myPost"
                  >帖子列表</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </el-container>
        </el-aside>
        <el-container style="min-height: calc(100vh - 70px);">
          <el-main> <router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "individualCenter",
  data() {
    return {
      activeIndex: "",
    };
  },
  components: {
  },
  methods: {
    setCurrentRoute() {
      this.activeIndex = this.$route.path;
    },
  },
  watch: {
    $route() {
      this.setCurrentRoute();
    },
  },
  created() {
    this.setCurrentRoute();
  },
};
</script >

<style scoped>
.center {
  width: 100%;
  min-width: 1192px;
  background: white;
  min-height: calc(100vh - 71px);
}
img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
li {
  list-style: none;
}
.leftaside {
  background-color: rgb(163, 220, 243);
  width: 250px;
  height: 755px;
}
.upbar {
  background-color: rgb(163, 220, 243);
  height: 140px;
  width: 100%;
}
a {
  text-decoration: none;
  color: black;
}
h1 {
  font-size: 40px;
  color: white;
}
.bigbox {
  background-color: white;
  margin: 0px auto;
  width: 70%;
  min-width: 990px;
  border: 1px solid skyblue;
}
.el-menu-item {
  border-right: 1px solid #e1e2e5;
}
</style>